use dioxus::prelude::*;

const MENU_CSS: Asset = asset!("assets/css/components/menu.css");

#[derive(Props, PartialEq, Clone)]
pub struct MenuItemProps {
    icon: String,
    text: String,
    is_active: bool,
    has_arrow: bool,
}

#[component]
pub fn MenuItem(props: MenuItemProps) -> Element {
    let active_class = if props.is_active { "active" } else { "" };

    rsx! {
        link { rel: "stylesheet", href: MENU_CSS }
        div {
            class: format_args!("menu-item {}", active_class),

            div { class: "menu-icon",
                img {
                    src: props.icon,
                    alt: "Menu Icon",
                    class: "icon"
                }
            }
            span { class: "menu-text", {props.text} }

            if props.has_arrow {
                div {
                    class: "menu-arrow",
                    svg {
                        view_box: "0 0 8 8",
                        path {
                            fill: "var(--text-white)",
                            d: "M4 5.5L1 2.5L1.7 1.8L4 4.1L6.3 1.8L7 2.5L4 5.5Z"
                        }
                    }
                }
            }
        }
    }
}
